
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return Center(
      child: Container(child: ImgLocal()),
    );
  }
}

/*
   引入本地图片
   1. 先要在跟目录新建一个 image 目录  里面新建2.0x、3.0x、4.0x文件夹
   2. 修改pubspec.yaml 声明一下添加的图片文件
   flutter: 
    uses-material-design: true
    // 新增的代码.....
    assets:
      - images/vue.png
      - images/2.0x/vue.png
      - images/3.0x/vue.png
      - images/4.0x/vue.png
    .......
*/
class ImgLocal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 圆形 组件
    return ClipOval(
      child: Image.asset(
        "images/vue.png",
        width: 100.0,
        height: 100.0,
        fit: BoxFit.cover,
      ),
    );
  }
}

// 引入远程图片
class ImgNetwork extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return Image.network(
      "https://imgsa.baidu.com/exp/w=480/sign=c796844967d9f2d3201125e799ed8a53/1b4c510fd9f9d72adc3babb5d12a2834349bbb3f.jpg",
      alignment: Alignment.center,
      // color: Colors.yellow,
      // 混合
      // colorBlendMode: BlendMode.screen,
      // 常用，类似 background-size:cover
      fit: BoxFit.fitWidth,
      // 类似 background-repeat:no-repeat
      repeat: ImageRepeat.repeat,
    );
  }
}

// 圆形 组件
class ClipOvals extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 圆形 组件
    return ClipOval(
      child: Image.network(
        "https://imgsa.baidu.com/exp/w=480/sign=c796844967d9f2d3201125e799ed8a53/1b4c510fd9f9d72adc3babb5d12a2834349bbb3f.jpg",
        width: 100.0,
        height: 100.0,
        fit: BoxFit.cover,
      ),
    );
  }
}
